<template>
	<view>
		<view style="width: 100%; position: fixed;top: 0; z-index: 999;">
			<uni-nav-bar height="160rpx" class="uni-nav-bar" left-icon="left" :border="false" :title="title"
				@clickLeft="navBarClick"> </uni-nav-bar>
			<HM-filterDropdown :filterData="filterData" menu-top="130"
				:defaultSelected="defaultSelected"></HM-filterDropdown>
		</view>
		<view class="MaxBox">
			<view style="margin-top: 230rpx;">
				<view style="width: 100%;margin: 0 auto;">
					<u-search placeholder="请输入您心爱房源关键字" height="85rpx" :animation="true" borderColor="#e6e6e6"
						bgColor="#ffffff" v-model="search_content"></u-search>
				</view>
				<view class="u-page__tag-item">
					<u-tag v-for="(item, index) in checkboxs" :key="index" :text="item.name" :plain="!item.checked"
						type="primary" shape="circle" :name="index" @click="checkboxClick">
					</u-tag>
				</view>
				<view class="container_primary">
					<view style="width: 94.5%;height: 600rpx;padding: 20rpx;margin-top: 10rpx;"
						v-for="(room,index) in SelectedRooms" :key="index">
						<u-swiper @tap="particulars" height="390rpx" indicatorMode="dot" :indicator="true"
							:list="room.imgList" keyName="imgSrc" circular></u-swiper>

						<view style="width: 100%;padding: 20rpx;line-height: 45rpx;" @tap="particulars">
							<view>{{room.roomTitle}}</view>
							<view>
								<u--text prefixIcon="map" :size='13' iconStyle="font-size: 29rpx"
									:text="room.roomAddress"></u--text>
							</view>
							<view style="width: 100%;display: flex;">
								<view style="margin: 5rpx;" v-for="(item,TableIndex) in room.roomLabel"
									:key="TableIndex">
									<u-tag size='mini' :text="item" plain> </u-tag>
								</view>
							</view>
							<view style="display: flex;height: 50rpx;line-height: 50rpx;">
								<view style="width: 30%; color: #ee4242;">
									￥{{room.roomMoney}}/月
								</view>
								<view style="width: 66%;height: 50rpx; text-align: right;">
									<image style="width: 30rpx;vertical-align: -5rpx;margin-right: 5rpx;"
										src="../../static/日期.png" mode="widthFix"></image>
									<text style="font-size: 27rpx;color: #9e9e9e;">可入住日期{{room.roomDataTime}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<uni-load-more :status="status" :iconSize="18" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import filterData from '../../static/data.js'
	export default {
		data() {
			return {
				status: 'loading',
				search_content: '',
				title: '',
				filterData: filterData,
				checkboxs: [{
						checked: false,
						name: '整租'
					},
					{
						checked: false,
						name: '住宅'
					},
					{
						checked: false,
						name: '公寓'
					},
					{
						checked: false,
						name: '独卫'
					}
				],
				SelectedRooms: [{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://img2.baidu.com/it/u=1795613048,2862580360&fm=253&fmt=auto&app=138&f=JPEG'
							},
							{
								imgSrc: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1002%2F9aa2a30bj00r0bx8r001mc000hs00hsm.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
							},
							{
								imgSrc: 'https://img2.baidu.com/it/u=640370081,883809769&fm=253&fmt=auto&app=138&f=JPEG'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					}
				]
			};
		},
		onLoad: function(data) {
			this.search_content = data.RoomName
			this.title = data.title
		},
		methods: {
			navBarClick() {
				uni.navigateBack()
			},
			checkboxClick(name) {
				this.checkboxs[name].checked = !this.checkboxs[name].checked
			},
			particulars() {
				uni.navigateTo({
					url: '/seedComponents/HouseInformation/HouseInformation'
				})
			}
		}
	}
</script>

<style lang="scss">
	//自定义uni-nav-bar导航栏标题样式
	/deep/ .uni-nav-bar .uni-nav-bar-text {
		font-size: 39rpx !important;
		color: black !important;
		font-weight: bold;

	}

	.MaxBox {
		width: 92%;
		padding: 0 30rpx;
		background-color: #fff;

		.u-page__tag-item {
			width: 80%;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			margin: 10rpx auto;
		}

		.container_primary {
			width: 100%;
		}
	}
</style>